<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询单个用户</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head><style>
    p{
        display: inline;
    }
    #id{
        margin-left: 15px;
    }
    td,th{
        border: solid black 1px;
    }
	html body {
	margin:0px;padding:0px}
	li{
	display: inline;
	margin-right:25px;
    padding-top:15px!important;
	}
	ul{
	margin-top:0px;
	padding-top:12px;
	}
	#One{
	margin-left:10%;
	}
	a{
	font-size:25px
	}
	#CD{
	height:60px;
	background-color:blue;
	}
	a{
	text-decoration:none
	}
	a a:link{
	color:white;
	}
	a:visited{
	color:white;
	}
	a:active{
	color:white;
	}
	a:hover {
	color:red;
	}
	#nr{
	margin-top:5%;
	margin-left:10%;}
</style>
<body>
<div id="CD">
<ul>
<li id="One"><a href="findAllUser.html" >查询所有</a></li>
<li><a href="findOneUser.html" >查询单个</a></li>
<li><a href="save.html" >增加</a></li>
<li><a href="update.html" >删除</a></li>
<li><a href="update.html" >修改</a></li>
</ul>
</div>
<div id="nr">
<h1>查询所有用户</h1>
<p>按ID查询</p>
<input type="text" name="text" id="id">
<br>
<p>按名称查询</p>
<input type="text" name="text" id="firstName">
<br>
<br>
<button>发送请求</button>
<br>
<br>

<table id="mytab" border="1">
    <tr id="htr">
        <th>#</th>
        <th>名</th>
        <th>姓</th>
        <th>邮箱</th>
        <th>手机号</th>
        <th>生日</th>
    </tr>
</table>
</div>
<script>
    $(document).ready(function() {
        $('button').on('click',function() {
		
		    if($id === null){
			}
		
            var $id = $('#id').val();
            var $firstName = $('#firstName').val();

          

            if ($id !== null) {
                params = {
                    "id" : $id
                };
				alert($id);
            }

            $.ajax({
                url : "http://192.168.0.120:8080/customers/" + $id,
                type : 'GET',
                dataType : 'json',
                data : params,
                success : function(data) { // 数据状态success
                    console.log(data);
					$("#htr").nextAll().remove();
					alert(data.id);
					
					if(data.id!=undefined){
					
					  $("#mytab").append("<tr><td>"+data.id+"</td><td>"+data.firstName+"</td><td>"+data.lastName+"</td><td>"+data.email+"</td><td>"+data.mobile+"</td><td>"+data.dateOfBirth+"</tr>");
					}
					
                  
                }
            });
        })
    })
</script>
<script>
    
	$(document).ready(function() {
        $('button').on('click',function() {
            var $id = $('#id').val();
            var $firstName = $('#firstName').val();

            var params;
            if ($firstName !== null) {
                params = {
                    "firstName" : $firstName
                };
                alert($firstName);
            }
			
            $.ajax({
                url : "http://192.168.0.120:8080/" + $firstName,
                type : 'GET',
                dataType : 'json',
                data : params,
                success : function(data) { // 数据状态success
				$("#htr").nextAll().remove();
                    console.log(data);
                    $("#mytab").append("<tr><td>"+data.id+"</td><td>"+data.firstName+"</td><td>"+data.lastName+"</td><td>"+data.email+"</td><td>"+data.mobile+"</td><td>"+data.dateOfBirth+"</tr>");
                   
                }
            });
			 
        })
    })
</script>
</body>
</html>